<!-- 配置计划 -->
<template>
	<div class="configurationPlan">
		<!-- <CommonTitle titleName="已创建的任务节点"> </CommonTitle>

		<div class="taskNode">
			<div class="nodeItem" v-for="(v, i) in state.allNodes" :key="i">
				<span>{{ v.nodeName }}</span>
			</div>

			<div class="nodeItem nodeItemShow">
				<span>显示流程标签名称</span>
			</div>
		</div> -->

		<CommonTitle titleName="招标项目任务实施节点配置"> </CommonTitle>
		<div class="nodeConfig">
			<div class="nodeC_l">
				<div class="basiItme">
					<div class="itemLable">招标项目类别</div>
					<div class="itemContent">{{ projectTypeExplain }}</div>
				</div>
				<div class="basiItme">
					<div class="itemLable">招标方式</div>
					<div class="itemContent">{{ tenderTypeExplain }}</div>
				</div>

				<!-- <el-form :model="nodeConfigForm">
					<el-form-item label="招标项目类别" label-width="100">
						<el-select v-model="nodeConfigForm.searchName" placeholder="">
							<el-option label="全部" value="" />
						</el-select>
					</el-form-item>
					<el-form-item label="招标方式" label-width="100">
						<el-select v-model="nodeConfigForm.searchName" placeholder="">
							<el-option label="全部" value="" />
						</el-select>
					</el-form-item>
				</el-form> -->
			</div>

			<div class="nodeC_">
				<div class="node_c_item" v-for="(v, i) in state.taskFlowData" :key="i">
					<div class="node_c_item_icon">
						<svg-icon
							@click="handleJiaj(i)"
							icon-class="project-detail-icon-jia"
							class="icon"
						/>
						<svg-icon
							@click="handleJianj(i)"
							icon-class="project-detail-icon-jian"
							class="icon"
						/>
					</div>
					<div class="node_c_item_1">
						<div class="node_c_item_1_nm">实施节点</div>
						<div class="node_c_item_1_b">
							<span>{{ v.nodeName }}</span>
							<span v-if="i !== state.taskFlowData.length - 1">
								<svg-icon
									icon-class="project-detail-icon-up"
									class="icon icon-up"
								/>
							</span>
							<span>
								<svg-icon
									icon-class="project-detail-icon-left"
									class="icon icon-right"
								/>
							</span>
						</div>
					</div>
					<div class="node_c_item_2"></div>
					<div class="node_c_item_3">
						<span>{{ v.actionResult }}</span>
						<span></span>
					</div>
					<div class="c_tab_lc_item_colbtn">
						<el-button color="#D4AE85" @click="editDialog(i)">设置</el-button>
					</div>
				</div>
			</div>
			<div class="nodeC_subimt">
				<el-button color="#D4AE85" @click="handleSubmit"
					>提交新计划配置</el-button
				>
			</div>
		</div>

		<!-- 选择新增的流程 -->
		<AddProcessDialog
			ref="addProcessRef"
			@updataAddProcess="updataAddProcess"
			type="action"
			:allNodes="state.allNodes"
			:showArrayList="state.taskFlowData"
		></AddProcessDialog>

		<!--设置所选流程执行结果弹窗 -->
		<EditProcessResult
			@updataNodeActions="updataNodeActions"
			:allNodeActions="
				state.allNodes[0]?.actionId ? state.allNodes : state.allNodeActions
			"
			ref="editProcessResultRef"
		></EditProcessResult>
	</div>
</template>

<script setup>
import CommonTitle from "@/components/CommonTitle.vue";
import { useRouter } from "vue-router";
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import AddProcessDialog from "./components/AddProcessDialog.vue";
import { getURLhandler } from "@/views/constructionProjectManage/static/utools.js";
import { useStore } from "vuex";
import EditProcessResult from "./components/EditProcessResult";
import { processApi } from "@/api/biddingProject";
import { useRoute } from "vue-router";
const route = useRoute();
const router = useRouter();
const store = useStore();
import { competitiveBiddingStatusOptions } from "@/common/dict/dictCollect";
const tenderTaskId = getURLhandler(route.path).tenderTaskId;
const tenderTypeList = ref([]);

const tenderType = getURLhandler(route.path).tenderType;

const projectTypeExplain = ref("");

const tenderTypeExplain = competitiveBiddingStatusOptions.find(
	(v) => v.value == getURLhandler(route.path).tenderTypeExplain
)?.label;

const addProcessRef = ref(null);
const nodeConfigForm = reactive({
	searchName: "",
});
const state = reactive({
	allNodeActions: [],
	allNodes: [],
	taskFlowData: [],
	tenderTaskId: tenderTaskId,
	tenderType: tenderType,
});
// 获取所有节点行为信息
const getAllNodeActions = () => {
	processApi.getAllNodeActions().then((res) => {
		if (res.code === "200") {
			state.allNodeActions = res.data;
			console.log("获取公共行为节点信息", state.allNodeActions);
		}
	});
};
// 获取所有节点信息
const getAllNodes = () => {
	processApi.getAllNodes().then((res) => {
		if (res.code === "200") {
			state.allNodes = res.data;
			console.log("获取公共节点信息", state.allNodes);
			if (state.allNodes.length > 0 && state.allNodeActions.length > 0) {
				funArrayHandle();
			} else {
				setTimeout(() => {
					funArrayHandle();
				}, 1000);
			}
		}
	});
};

const funArrayHandle = () => {
	if (state.allNodes.length == 0 && state.allNodeActions.length == 0) {
		return;
	}
	state.allNodes = state.allNodes.map((v, i) => {
		return {
			...v,
			...state.allNodeActions[i],
		};
	});

	console.log("state.allNodes ", state.allNodes);
};

const editProcessResultRef = ref(null);
const editDialog = (index) => {
	state.index = index;
	editProcessResultRef.value.open();
};

//获取招标任务的流程配置信息
const getTaskFlow = () => {
	processApi
		.getTaskFlow({
			tenderTaskId: state.tenderTaskId,
			tenderType: state.tenderType,
		})
		.then((res) => {
			if (res.code == 200) {
				state.taskFlowData = res.data;
				state.flowPublicId =
					state.taskFlowData.length > 0
						? state.taskFlowData[0].flowPublicId
						: "";
			}
		});
};

let index_ = null;
// 加
const updataAddProcess = (row) => {
	state.taskFlowData.splice(index_ + 1, 0, row);
	index_ = null;
};

// 减
const handleJianj = (index) => {
	if (state.taskFlowData.length == 1) {
		ElMessage.warning("至少保留一个节点");
		return;
	}
	state.taskFlowData.splice(index, 1);
};
// 加 打开弹出层
const handleJiaj = (index) => {
	index_ = index;
	addProcessRef.value.open();
};

// 提交计划配置
const handleSubmit = () => {
	if (!state.taskFlowData || state.taskFlowData.length == 0) {
		return;
	}
	const flowConfig = state.taskFlowData.map((v, i) => {
		let parentNodeId = null;
		if (i !== 0) {
			parentNodeId = state.taskFlowData[i - 1].nodeId;
		}
		const obj = {
			flowPublicId: v.flowPublicId || state.flowPublicId,
			nodeId: v.nodeId,
			actionId: v.actionId,
			parentNodeId,
		};
		return obj;
	});
	console.log("---,flowConfig", flowConfig);
	ElMessageBox.confirm("是否确认提交新计划配置?", "提示", {
		confirmButtonText: "确认发送",
		cancelButtonText: "取消",
		type: "warning",
		confirmButtonClass: "ExitConfirmButton",
		cancelButtonClass: "ExitCancelButton",
		center: true,
	}).then(() => {
		processApi
			.confirmTaskFlow({ tenderTaskId: state.tenderTaskId, flowConfig })
			.then((res) => {
				if (res.code == 200) {
					ElMessage.success("操作成功");
				/*	router.push({
						path: "/tender/taskManage/taskExecution",
					});*/
						router.push({
						path: "/tender/taskExecution",
					});
				}
			});
	});
};

// 设置流程执行结果
const updataNodeActions = (row) => {
	state.taskFlowData = state.taskFlowData.map((v, i) => {
		if (state.index == i) {
			v.actionResult = row.actionResult;
			v.actionId = row.actionId;
			state.index = "";
		}
		return v;
	});
};

const getTypeList = () => {
	processApi.getTypeList().then((res) => {
		if (res.code === '200') {
			tenderTypeList.value = res.data;
			if (
				res.data &&
				res.data.length > 0 &&
				getURLhandler(route.path).projectTypeExplain
			) {
				projectTypeExplain.value = tenderTypeList.value.find(
					(v) => v.projectTypeId == getURLhandler(route.path).projectTypeExplain
				)?.typeName;
			}
		}
	});
};

onMounted(() => {
	getAllNodeActions();
	getAllNodes();
	getTaskFlow();
	getTypeList();
});
</script>

<style lang="scss" scoped>
.configurationPlan {
	.taskNode {
		margin-bottom: 30px;
		display: flex;
		flex-wrap: wrap;
		.nodeItem {
			width: 267px;
			height: 42px;
			background: #ffffff;
			border-radius: 6px;
			border: 1px solid #1a1a1a;
			line-height: 42px;
			text-align: center;
			font-size: 14px;

			font-weight: 400;
			color: #1a1a1a;
			margin: 0 22px 32px 0;
			cursor: pointer;
		}
		.nodeItemShow {
			background: #fc7018;
			border: 1px solid #fc7018;
			color: #ffffff;
		}
		// .nodeItem:nth-child(5n) {
		//   margin-right: 0;
		// }
	}

	.nodeConfig {
		position: relative;
		display: flex;
		// justify-content: space-between;
		width: 100%;
		min-height: 380px;
		border-radius: 10px;
		border: 1px solid #e3e7f1;
		padding: 32px 0 100px 54px;

		.nodeC_l {
			width: 600px;
			.basiItme {
				display: flex;
				flex: 1;
				margin-bottom: 30px;
			}

			.itemLable {
				text-align: right;
				width: 100px;
				font-size: 14px;

				font-weight: 700;
				color: #1a1a1a;
				line-height: 40px;
				margin-right: 15px;
			}

			.itemContent {
				min-width: 250px;
				height: 40px;
				line-height: 40px;
				background: #f7f7fa;
				border-radius: 4px;
				padding: 0 20px;
				margin-left: 10px;
			}
		}
		.nodeC_ {
			width: 1124px;
			.node_c_item {
				display: flex;
				.node_c_item_icon {
					width: 100px;
					text-align: center;
					line-height: 60px;
					.icon {
						width: 22px;
						height: 22px;
						cursor: pointer;
					}
					.icon:nth-child(1) {
						margin-right: 5px;
					}
				}
				.node_c_item_1 {
					width: 257px;
					.node_c_item_1_nm {
						font-size: 12px;

						font-weight: 400;
						color: #666666;
						line-height: 18px;
					}
					.node_c_item_1_b {
						position: relative;
						width: 257px;
						height: 30px;
						line-height: 30px;
						background: #f7f7fa;
						border-radius: 6px;
						font-size: 14px;

						font-weight: 400;
						color: #1a1a1a;
						text-align: center;
					}
				}

				.node_c_item_2 {
					width: 48px;
				}
				.node_c_item_3 {
					width: 278px;
					height: 30px;
					line-height: 30px;
					background: #f7f7fa;
					border-radius: 6px;
					text-align: center;
					font-size: 14px;

					font-weight: 400;
					color: #1a1a1a;
					margin: 16px 0 0 30px;
				}
			}
		}
		.nodeC_subimt {
			position: absolute;
			bottom: 50px;
			right: 100px;
			.el-button {
				color: #fff;
				width: 200px;
				height: 36px;
				line-height: 36px;
				text-align: left;
				border-radius: 36px;
				font-size: 16px;
			}
		}
	}
	.icon-up {
		width: 18px;
		height: 18px;
		position: absolute;
		left: 50%;
		top: 40px;
	}
	.icon-right {
		width: 18px;
		height: 18px;
		position: absolute;
		right: -50px;
		top: 8px;
	}

	.c_tab_lc_item_colbtn {
		margin-top: 15px;
		.el-button {
			color: #fff;
			height: 30.0096px;
			margin-left: 13.9968px;
		}
	}
}
</style>
<style>
.ExitConfirmButton {
	background: #ff6f29 !important;
	color: #fff !important;
	border: 0;
}
.ExitCancelButton {
	background-color: #fff !important;
}
</style>
